<template>
  <view class="container">
    <scroll-view scroll-x class="tabs" :scroll-left="scrollLeft">
      <view 
        v-for="(tab, index) in tabs" 
        :key="tab.name" 
        @click="selectTab(index)" 
        :class="['tab-item', { active: index === activeTabIndex }]"
        :id="'tab-' + index"
      >
        {{ tab.label }}
      </view>
    </scroll-view>
    <swiper
      class="components"
      :current="activeTabIndex"
      @change="onSwiperChange"
      :style="{ height: swiperHeight + 'px' }"
    >
      <swiper-item v-for="tab in tabs" :key="tab.name">
        <scroll-view scroll-y class="scroll-view-content">
          <view class="component-item">
            <MyOrder v-if="tab.name === 'MyOrder'" />
            <PendingPayment v-if="tab.name === 'PendingPayment'" />
            <PendingShipment v-if="tab.name === 'PendingShipment'" />
            <PendingReceipt v-if="tab.name === 'PendingReceipt'" />
            <PendingReview v-if="tab.name === 'PendingReview'" />
            <Favorites v-if="tab.name === 'Favorites'" />
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import MyOrder from './components/MyOrder.vue';
import PendingPayment from './components/PendingPayment.vue';
import PendingShipment from './components/PendingShipment.vue';
import PendingReceipt from './components/PendingReceipt.vue';
import PendingReview from './components/PendingReview.vue';
import Favorites from './components/Favorites.vue';

export default {
  components: {
    MyOrder,
    PendingPayment,
    PendingShipment,
    PendingReceipt,
    PendingReview,
    Favorites
  },
  data() {
    return {
      tabs: [
        { name: 'MyOrder', label: '我的订单' },
        { name: 'PendingPayment', label: '待付款' },
        { name: 'PendingShipment', label: '待发货' },
        { name: 'PendingReceipt', label: '待收货' },
        { name: 'PendingReview', label: '待评价' },
        { name: 'Favorites', label: '退款售后' }
      ],
      activeTabIndex: 0,
      swiperHeight: 500, // 初始高度，可以根据实际情况调整
      scrollLeft: 0
    };
  },
  methods: {
    selectTab(index) {
      this.activeTabIndex = index;
      this.scrollTabIntoView(index);
    },
    onSwiperChange(e) {
      this.activeTabIndex = e.detail.current;
      this.scrollTabIntoView(this.activeTabIndex);
			let serviceName = this.tabs[this.activeTabIndex].label
			setTimeout(function() {
				uni.redirectTo({
				    url: `/pages/serviceDetail/serviceDetail?service=${serviceName}`
				})
			}, 300)
    },
    scrollTabIntoView(index) {
      const query = uni.createSelectorQuery().in(this);
      query.select('#tab-' + index).boundingClientRect();
      query.select('.tabs').boundingClientRect();
      query.exec(res => {
        if (res[0] && res[1]) {
          const tabRect = res[0];
          const tabsRect = res[1];
          this.scrollLeft = tabRect.left - tabsRect.left + tabRect.width / 2 - tabsRect.width / 2;
        }
      });
    }
  },
  onLoad(options) {
    if (options.service) {
      const foundIndex = this.tabs.findIndex(tab => tab.label === options.service);
      if (foundIndex !== -1) {
        this.activeTabIndex = foundIndex;
      }
    }
    
    // 获取系统信息来设置swiper的高度
    uni.getSystemInfo({
      success: (res) => {
        this.swiperHeight = res.windowHeight - uni.upx2px(100); // 假设tabs高度为100upx
      }
    });
  },
  mounted() {
    this.scrollTabIntoView(this.activeTabIndex);
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}
.tabs {
  display: flex;
  white-space: nowrap;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.tab-item {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 4.02vw;
}
.tab-item.active {
  font-weight: bold;
  border-bottom: 2px solid #ffd700;
}
.components {
  flex: 1;
}
.scroll-view-content {
  height: 100%;
}
.component-item {
  background-color: #fff;
  margin: 20px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
</style>